<html>
<html>
<meta charset="utf-8">
<title>首页</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<style>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .container {
        margin: 50px auto;
        width: 1000px;
        height: 600px;
        background-color: #fff;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        border-radius: 10px;
    }

    .container .top {
        width: 1000px;
        height: 80px;
        background-color: #484a4b;
    }

    .container .top .userInfo {
        padding: 30px;
        color: white;
    }

    .container .top .userInfo .status {
        display: inline-block;
        margin-left: 84%;
        color: green;
    }

    .container .top .userInfo p {
        display: inline-block;
        margin-left: 44%;
        color: white;
    }

    .container .aside {
        float: right;
        width: 300px;
        height: 520px;
    }

    .container .chat {
        float: left;
        width: 680px;
        height: 520px;
    }

    .container .aside .UserList {
        margin: 10px 0 10px 10px;
    }

    .highlight {
        color: skyblue;
        font-size: 16px;
    }

    .container .aside .System {
        margin: 100px 0 10px 10px;
    }

    .container .aside .System ul {
        color: #d5d7d6;
    }

    .container .chatMain .chatCnt .chatContent {
        width: 700px;
        height: 350px;
        margin-top: 10px;
    }

    #tex_content {
        width: 600px;
        height: 95px;
        border: 0;
        outline: 0;
        margin-left: 10px;
    }

    /* .sender {
        clear: both;
    } */

    /*发送者左浮动*/
    .sender div:nth-of-type(1) {
        float: left;
        margin-left: 5px;
    }

    .sender div:nth-of-type(2) {
        background-color: aquamarine;
        float: left;
        margin: 0 20px 10px 15px;
        padding: 10px 10px 10px 0px;
        border-radius: 7px;
    }

    /* .receiver {
        clear: both;
    } */
    /*发送者右浮动*/
    .receiver div:nth-child(1) {
        float: right;
    }
    /*发送者消息*/
    .receiver div:nth-of-type(2) {
        float: right;
        background-color: gold;
        margin: 0 10px 10px 20px;
        padding: 10px 0px 10px 10px;
        border-radius: 7px;
    }

    .left_triangle {
        height: 0px;
        width: 0px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent aquamarine transparent transparent;
        position: relative;
        left: -19px;
        top: 3px;
    }

    .right_triangle {
        height: 0px;
        width: 0px;
        border-width: 8px;
        border-style: solid;
        border-color: transparent transparent transparent gold;
        position: relative;
        right: -16px;
        top: 3px;
    }  
</style>
</head>

<body>
    <div class="container">
        <!--top-->
        <div class="top">
            <div class="userInfo">
                用户：<span>张三</span><span class="status">在线</span>
                <p>正在和<span>李四</span>聊天</p>
            </div>
        </div>
        <!--右侧栏-->
        <div class="aside">
            <!--列表-->
            <div class="UserList">
                <span class="highlight">用户列表</span>
                <div class="ui divider"></div>
                <ul>
                    <li>李四</li>
                    <li>王五</li>
                </ul>
            </div>
            <!--列表-->
            <div class="System">
                <span class="highlight">系统广播</span>
                <div class="ui divider"></div>
                <ul>
                    <li>您的好友<span>李四</span>已上线</li>
                    <li>您的好友<span>王五</span>已上线</li>
                </ul>
            </div>
        </div>
        <!--聊天区-->
        <div class="chatMain">
            <!--聊天展示区域-->
            <div class="chatCnt">
                <div class="chatContent">
                    <!--right 接受者-->
                    <div class="receiver">
                       <div>
                           <!--头像-->
                           <img class="avatar" style="height:40px"
                               src="https://semantic-ui.com/images/avatar/small/elliot.jpg">
                       </div>
                       <div>
                           <div class="right_triangle"></div>
                           <span>你也好啊</span>
                       </div>
                   </div>
                   <br>
                   <br>
                   <!--left 发送者-->
                   <div class="sender">
                       <div>
                           <!--头像-->
                           <img class="avatar" style="height:40px"
                               src="https://semantic-ui.com/images/avatar/small/jenny.jpg">
                       </div>
                       <div>
                           <div class="left_triangle"></div>
                           <span>你好啊</span>
                       </div>
                   </div>
               </div>
            </div>
            <div class="ui divider" style="width:700px"></div>
            <div class="chatArea">
                <textarea id="tex_content" placeholder="在此输入文本内容！"></textarea>
                <div class="ui blue labeled submit icon mini button right floated">
                    <i class="icon edit"></i> Add Reply
                </div>
            </div>
        </div>
    </div>
</body>

</html>